<template>
	<div id="banner">
		<div class="slogan">
			<div style="font-size: 64px;">
				<span>{{slogan}}</span>
			</div>
			<div>
				<span>The quieter you become,The more you can hear.</span>
			</div>
		</div>
		<div class="start">
			<a href="#" onclick="document.querySelector('#start_read').scrollIntoView(true);">
				开始阅读
			</a>
			<a href="#">
				github
			</a>
		</div>
		<div></div>
		<div class="cover_social_link">
			<a href="#">
				github
			</a>
			<a href="#">
				email
			</a>
			<a href="#">
				qq
			</a>
		</div>
		<p id="start_read"></p>
	</div>
</template>

<script>
export default {
	name: 'Banner',
	props: ['slogan'],
	mounted() {
		this.$bus.$on('hello', (data)=>{console.log(data);})
	},
	beforeDestroy() {
		this.$bus.$off('hello')
	}
}
</script>

<style scoped>
	#banner {
		display: flex;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to top, #12c0fa 0%, #158df4 100%);
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
	}
	#banner > div {
		padding: 50px 0;
		width: 100%;
		/* background-color: gray; */
		/* border: 1px solid red; */
		text-align: center;
		font-size: 20px;
		color: white;
	}
	#banner a {
		text-decoration: none;
		color: white;
	}
	.start a {
		padding: 10px 35px;
		margin: 10px 15px;
		border: 1px solid white;
		border-radius: 30px;
		transition: all .3s ease-out;;
	}
	.start a:hover {
		background-color: #f44336;
		border: 1px solid #f44336;
		box-shadow: 0 14px 26px -12px rgb(233 30 99 / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(233 30 99 / 20%);
	}
	/* .cover_social_link {
		position: absolute;
		bottom: 0;
	} */
	.cover_social_link a {
		padding: 10px 35px;
	}
</style>